<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://115.159.88.63:9090/resources/bootstrap/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="http://115.159.88.63:9090/resources/bootstrap-icons/font/bootstrap-icons.min.css"/>
    <link rel="stylesheet" href="http://115.159.88.63:9090/resources/element-ui/lib/theme-chalk/index.css"/>
    <!-- <link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../node_modules/bootstrap-icons/font/bootstrap-icons.min.css"> -->
    <link rel="stylesheet" href="../../assets/css/common.css">
    <link rel="stylesheet" href="./index.css">

</head>

<body>
    <div id="app">
        <!-- 引入头部组件 -->
        <header class="navbar bg-dark navbar-dark fixed-top navbar-expand-lg ">
            <!-- 版心部分
                container：指定两端留白版心
            -->
            <nav class="container">
                <!-- logo+个人名称
                    navbar-brand：导航栏中的一栏需要加的属性
                -->
                <a class="navbar-brand" href="http://localhost/pages/index/index.html">
                    <!-- height="40px"：指定图片高度为40px -->
                    <img height="40px" src="../../assets/images/itsource-w.png" alt="源码博客">
                </a>

                <!-- 折叠按钮
                    navbar-toggler：代表是导航栏中的折叠按钮
                    type="button"：默认button是submit，指定为按钮
                    data-bs-toggle="collapse"：用于触发折叠菜单的展开与折叠
                    data-bs-target="#navmenu"：指定折叠的目标，通过id选择器指定
                -->
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
                    <!-- navbar-toggler-icon：指定折叠的图标 -->
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!-- 导航部分
                    collapse：指定一个折叠标签
                    navbar-collapse：代表导航栏中的折叠元素
                    justify-content-between：指定折叠元素的对齐方式
                    ms-5：指定外边距，距离左边5rem
                    id="navmenu"：用于折叠按钮寻找到此折叠元素
                -->
                <div class="collapse navbar-collapse justify-content-between ms-5" id="navmenu">
                    <!-- navbar-nav：指定导航栏中的导航 -->
                    <ul class="navbar-nav">
                        <!-- nav-item：指定导航元素 -->
                        <li class="nav-item">
                            <!-- nav-link：指定导航链接 -->
                            <a class="nav-link" href="http://localhost/pages/index/index.html"><i class="bi bi-house-door">首页</i></a>
                        </li>
                        <!-- nav-item：指定导航元素 -->
                        <li class="nav-item">
                            <!-- nav-link：指定导航链接 -->
                            <a class="nav-link" href="http://localhost/pages/blogarchives/blog-archives.html"><i
                                    class="bi bi-clock-fill">归档</i></a>
                        </li>
                        <!-- 此处使用的是下拉菜单
                            nav-item：指定导航元素
                            dropdown：指定下拉菜单
                        -->
                        <li class="nav-item dropdown">
                            <!-- nav-link：指定导航链接
                                dropdown-toggle，data-bs-toggle="dropdown"：指定此元素是下拉菜单标签
                                
                            -->
                            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">
                                <i class="bi bi-blockquote-right">文章分类</i>
                            </a>
                            <!-- dropdown-menu dropdown-menu-dark：指定下拉菜单内容并设置按钮颜色 -->
                            <ul class="dropdown-menu dropdown-menu-dark">
                                <li v-for="item in articleTypeCount"><a class="dropdown-item"
                                     :href="'http://localhost/pages/blogsort/blog-sort.html?articleTypeId='+item.articleTypeId+'&articleTypeName='+item.articleTypeName">{{item.articleTypeName}}</a></li>
                            </ul>
                        </li>
                        <!-- nav-item：指定导航元素 -->
                        <li class="nav-item">
                            <!-- nav-link：指定导航链接 -->
                            <a class="nav-link" href="http://localhost/pages/blogabout/blog-about.html"><i class="bi bi-person-lines-fill">关于我</i></a>
                        </li>
                    </ul>

                    <!-- 搜索按钮部分：使用的是按钮组
                        navbar-nav：指定导航栏中的导航
                    -->
                    <div class="navbar-nav">
                        <!-- 
                            input-group：指定按钮组
                            input-group-sm：指定按钮组大小
                         -->
                        <div class="input-group">
                            <!-- form-control：指定按钮组搜索框 -->
                            <input type="search" v-model="keyword" class="form-control form-control-sm" style="box-shadow: none;"
                                placeholder="请输入...">
                            <!-- 
                                type="button"：修改类型为按钮
                                input-group-text：指定为按钮组按钮
                             -->
                            <button type="button" @click="getArticles" class="btn btn-sm btn-outline-secondary" id="btnGroupAddon"><i
                                    class="bi bi-search"></i></button>
                        </div>
                    </div>
                </div>


            </nav>
        </header>


        <!-- 
        主体内容
        container：设置版心为两端留白
        style="margin-top: 80px;"：设置版心上外边距为80px
     -->
        <main class="container" style="margin-top: 80px;">
            <!-- row：将整个版心设置为一行，开启网格系统 -->
            <div class="row">
                <!-- col-md-8：设置主题内容左半部分为8格
                 col-xs-12：设置主体内容在xs尺寸下占12格
            -->
                <div class="col-md-8 col-xs-12">
                    <!-- 卡片一
                        card：开启卡片
                        mt-3：每个卡片距离上外边距为rem:3
                -->
                    <div class="card mt-3" v-for="article in articles">
                        <!-- 
                        card-body：指定卡片内容部分
                        d-flex：将卡片内容部分开启弹性布局
                     -->
                        <div class="card-body d-flex">
                            <!-- 
                            card-img-top：设置卡片图片置位顶部
                            card-cover：给卡片图片取一个类名，用于在css文件中设置封面的宽高
                            img-fluid：响应式图片，跟随屏幕大小自动缩放图片比例
                         -->
                            <a :href="'../blogdetail/blog-detail.html?articleId='+article.id"><img :src="article.articlePic"
                                    class="card-img-top card-cover img-fluid" alt="...">
                            </a>
                            <!-- 设置封面图片右边内容div
                                ms-3：距离左边封面3rem
                        -->
                            <div class="ms-3">
                                <!-- 
                                card-link：指定a标签为卡片链接
                                text-decoration-none：去掉a标签自带样式
                             -->
                                <a :href="'http://localhost/pages/blogdetail/blog-detail.html?articleId='+article.id" class="card-link text-decoration-none">
                                    <h5>{{article.articleName}}</h5>
                                </a>
                                <!-- 
                                card-text：指定为卡片文本
                                opacity-50：透明度50
                                style="font-family: Georgia"：指定文本字体格式
                                &bull;：•的转译字符
                             -->
                                <p style="font-family: Georgia" class="card-text opacity-50">&bull; {{article.createTime}} </p>
                                <!-- card-text：指定为卡片文本 -->
                                <p class="card-text">{{article.articleTag}}</p>
                            </div>
                        </div>
                        <!-- 卡片中间的线使用hr实现 -->
                        <hr class="mx-4 my-0">
                        <!-- 
                        d-flex：开启卡片底部内容为弹性布局
                        justify-content-between：设置底部内容水平对齐方式
                        align-items-center：设置底部内容垂直对齐方式
                        px-4：让底部内容的内水平边距设置为4rem，这样内容更居中
                        style="height: 60px;"：设置底部内容高度为60px
                     -->
                        <div class="d-flex justify-content-between align-items-center px-4" style="height: 60px;">
                            <div>
                                <span class="card-text mx-1">
                                    <i class="bi bi-folder2-open"></i>{{article.articleTypeObj.typeName}}
                                </span>
                                <span class="card-text mx-1">
                                    <i class="bi bi-tags"></i>{{article.articleTag}}
                                </span>
                            </div>
                            <a :href="'http://localhost/pages/blogdetail/blog-detail.html?articleId='+article.id" class="card-link btn btn-primary">阅读全文</a>
                        </div>
                    </div>
                    <!-- 
                    分页部分
                    text-end：设置分页位置靠右
                    id="app"：提供给vue做绑定的
                    overflow-auto：溢出自适应，屏幕缩小后分页栏有水平滚动条
                 -->
                    <div class="text-end my-3 overflow-auto">
                        <!-- 
                        elementUI的分页组件：后续学习完VUE之后博客前台使用VUE，所以此处直接使用VUE的分页
                     -->
                        <el-pagination @current-change="handleCurrentPage" :page-size="pageSize" :current-page="currentPage" background layout="total, prev, pager, next, jumper" :total="totals">
                        </el-pagination>
                    </div>
                </div>

                <!-- 侧边栏
                sidebar：用于使用jQuery引入侧边栏组件
                col-md-4：此侧边栏站整个网格的4份
                mb-5：侧边栏距离下面5rem
                d-none d-sm-block：在xs尺寸下隐藏，适用于手机
            -->
                <div class="sidebar col-md-4 mb-5 d-none d-sm-block">
                    <div>

                        <!-- 卡片一 -->
                        <div class="card mt-3">
                            <div class="card-body d-flex">
                                <img :src="param.user_weixin_url" class="card-img-top img-fluid"
                                    style="width: 120px;" alt="...">
                                <div class="ms-5">
                                    <p class="card-text">&bull; 技术干货分享</p>
                                    <p class="card-text">&bull; 免费资料领取</p>
                                    <p class="card-text fw-bolder">&bull; 扫码领取更多惊喜</>
                                </div>
                            </div>
                        </div>

                        <!-- 卡片二 -->
                        <div class="card mt-3">
                            <div class="card-body">
                                <h5>社交</h5>
                                <hr />
                                <p class="card-text">微信: {{param.user_qq_no}}</p>
                                <p class="card-text">邮箱: {{param.user_email}}</p>
                            </div>
                        </div>

                        <!-- 动态图 -->
                        <img class="mt-3 img-fluid" src="../../assets/images/g1.gif" alt=""
                            style="height: 130px; width: 100%;">

                        <!-- 卡片三 -->
                        <div class="card mt-3">
                            <div class="card-body">
                                <h5>分类</h5>
                                <hr />
                                <p v-for="item in articleTypeCount"><a :href="'http://localhost/pages/blogsort/blog-sort.html?articleTypeId='+item.articleTypeId+'&articleTypeName='+item.articleTypeName" class="card-link text-decoration-none">{{item.articleTypeName}} ({{item.count}})</a></p>
                            </div>
                        </div>

                        <!-- 卡片四 -->
                        <div class="card mt-3">
                            <div class="card-body">
                                <h5>归档</h5>
                                <hr />
                                <p v-for="item in archives"><a href="http://localhost/pages/blogarchives/blog-archives.html" class="card-link text-decoration-none">{{item.month}} ({{item.count}})</a></p>
                            </div>
                        </div>

                        <!-- 卡片五 -->
                        <div class="card mt-3">
                            <div class="card-body">
                                <h5>友情链接</h5>
                                <hr />
                                <p v-for="item in friendAddress"><a :href="item.address" class="card-link text-decoration-none">{{item.name}}</a></p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </main>
    </div>

    
<!-- 引入本地Bootstrap5的JS -->
<script src="http://115.159.88.63:9090/resources/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- 引入本地vue.js -->
<script src="http://115.159.88.63:9090/resources/vue/dist/vue.min.js"></script>
<!-- 引入本地elementUi的JS -->
<script src="http://115.159.88.63:9090/resources/element-ui/lib/index.js"></script>
<!-- 引入本地的axios -->
<script src="http://115.159.88.63:9090/resources/axios/dist/axios.js"></script>

<!-- 
    <script src="../../node_modules/vue/dist/vue.min.js"></script>
    <script src="../../node_modules/element-ui/lib/index.js"></script>
    <script src="../../node_modules/jQuery/tmp/jquery.js"></script>
    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <script src="../../node_modules/axios/dist/axios.min.js"></script>
     -->
    <script src="../../assets/js/common.js"></script>
    <script src="./index.js"></script>
    <script>

        /* 必须要挂载分页栏才会起作用 */
        new Vue({
            el: "#app",
            data() {
                return {
                    currentPage:1,
                    pageSize:5,
                    totals:0,
                    keyword:"",
                    articles:[],
                    articleTypeCount:[],
                    archives:[],
                    friendAddress:[],
                    param:{}
                };
            },
            methods: {
                handleCurrentPage(currentPage){
                    this.currentPage = currentPage;
                    this.getArticles();
                },
                // 分页获取文章数据
                getArticles(){
                    let param = {
                        "currentPage":this.currentPage,
                        "pageSize":this.pageSize,
                        "keyword":this.keyword
                    }
                    this.$http.post("/tourist/article/page", param)
                        .then(res=>{
                            // 对象的解构表达式
                            let {msg,data,success} = res.data;
                            if(success){
                                this.totals = data.total;
                                this.articles = data.list;
                            }else {
                                this.$message.error(msg);
                            }
                        })
                },
                getArticleTypeCount(){
                    this.$http.get("/tourist/article/articleTypeCountVo")
                        .then(res=>{
                            // 对象的解构表达式
                            let {msg,data,success} = res.data;
                            if(success){
                                this.articleTypeCount = data;
                            }else {
                                this.$message.error(msg);
                            }
                        })
                },
                getArchives(){
                    this.$http.get("/tourist/article/archivesTime")
                        .then(res=>{
                            // 对象的解构表达式
                            let {msg,data,success} = res.data;
                            if(success){
                                this.archives = data;
                            }else {
                                this.$message.error(msg);
                            }
                        })
                },
                getFriendAddress(){
                    this.$http.get("/tourist/article/friendAddress")
                        .then(res=>{
                            // 对象的解构表达式
                            let {msg,data,success} = res.data;
                            if(success){
                                this.friendAddress= data;
                            }else {
                                this.$message.error(msg);
                            }
                        })
                },
                getParam(){
                    this.$http.get("/tourist/article/param")
                        .then(res=>{
                            // 对象的解构表达式
                            let {msg,data,success} = res.data;
                            if(success){
                                this.param = data;
                            }else {
                                this.$message.error(msg);
                            }
                        })
                }
            },
            mounted() {
                this.getArticles();
                this.getArticleTypeCount();
                this.getArchives();
                this.getFriendAddress();
                this.getParam();
            },
        })
    </script>
</body>

</html>